<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修仙灵根查询 - 凡人修仙传</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23928e8a" fill-opacity="0.1" fill-rule="evenodd"%3E%3Cpath d="M0 0h30v30H0V0zm30 30h30v30H30V30z"/%3E%3C/g%3E%3C/svg%3E');
            background-color: #292524; /* Stone-900 equivalent */
        }
      .container {
            background-color: #44403c; /* Stone-800 equivalent */
            border: 1px solid #78350f; /* Amber-800 equivalent */
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
        }
      .card {
            background-color: #57534e; /* Stone-700 equivalent */
            border: 1px solid #78350f; /* Amber-800 equivalent */
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
        }
      .btn-primary {
            background-color: #b45309; /* Amber-700 equivalent */
            color: #f5f5f4; /* Stone-100 equivalent */
            transition: background-color 0.3s ease;
        }
      .btn-primary:hover {
            background-color: #92400e; /* Amber-800 darker */
        }
      .input-field {
            background-color: #292524; /* Stone-900 equivalent */
            color: #f5f5f4; /* Stone-100 equivalent */
            border: 1px solid #78350f; /* Amber-800 equivalent */
        }
      .text-accent {
            color: #fcd34d; /* Amber-300 for highlights */
        }
      .text-primary {
            color: #f5f5f4; /* Stone-100 */
        }
      .text-secondary {
            color: #d6d3d1; /* Stone-300 */
        }
      .border-accent {
            border-color: #b45309; /* Amber-700 */
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-4">

    <div class="container w-full max-w-4xl mx-auto p-6 md:p-8 rounded-lg text-primary">
        
        <header class="text-center mb-8">
            <h1 class="text-4xl md:text-5xl font-bold text-accent mb-2">灵根溯源：凡人修仙之道</h1>
            <p class="text-secondary text-lg">输入您的MBTI人格代码，探寻您的修仙灵根与天赋。</p>
        </header>

        <main>
            <section class="mb-8 p-6 card rounded-lg">
                <h2 class="text-2xl font-bold text-accent mb-4">测算您的仙缘</h2>
                <div class="flex flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4">
                    <input type="text" id="mbtiInput" placeholder="请输入您的MBTI代码 (如: INTJ)" 
                           class="input-field flex-grow p-3 rounded-md text-lg focus:outline-none focus:ring-2 focus:ring-amber-500" 
                           maxlength="4" onkeyup="this.value = this.value.toUpperCase();">
                    <button id="queryButton" class="btn-primary px-6 py-3 rounded-md text-lg font-semibold whitespace-nowrap">
                        查询灵根
                    </button>
                </div>
                <p id="errorMessage" class="text-red-400 mt-3 text-center hidden">请输入有效的MBTI代码 (例如: ISTJ, ENFP)。</p>
            </section>

            <section id="resultDisplay" class="hidden">
                <h2 class="text-2xl font-bold text-accent mb-4 text-center">您的修仙灵根与潜能</h2>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div class="card p-6 rounded-lg">
                        <h3 class="text-xl font-bold text-accent mb-3 border-b border-accent pb-2">灵根组合</h3>
                        <p id="spiritRoot" class="text-secondary text-lg leading-relaxed"></p>
                    </div>
                    <div class="card p-6 rounded-lg">
                        <h3 class="text-xl font-bold text-accent mb-3 border-b border-accent pb-2">性格特质</h3>
                        <p id="personalityTraits" class="text-secondary text-lg leading-relaxed"></p>
                    </div>
                </div>

                <div class="card p-6 rounded-lg">
                    <h3 class="text-xl font-bold text-accent mb-3 border-b border-accent pb-2">天赋能力</h3>
                    <p id="innateAbilities" class="text-secondary text-lg leading-relaxed"></p>
                </div>
            </section>
        </main>
        
        <footer class="text-center mt-12 py-4 border-t border-stone-700">
            <p class="text-sm text-stone-400">此测算仅为娱乐与探索性参考，基于《人格特质、职业兴趣与修仙灵根的跨领域对应分析报告》。</p>
        </footer>

    </div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const mbtiData = {
        'ISTJ': {
            spiritRoot: '金, 土, 冰',
            personality: '安静、严肃、彻底、可靠、实际、务实、负责、逻辑、有条理、注重实际成果、尽责、冷静、沉着、自律、战略性。',
            abilities: '战斗功法、武器炼制、防御技术、肉身淬炼（锐化骨骼、钢化骨骼、玄煞之骨）[1], 防御阵法、土系操控、资源栽培、基础阵法、重击型物理攻击[1], 冰冻法术、防御屏障、减速/定身技术、精确打击、精神清晰[2, 1]。'
        },
        'ISFJ': {
            spiritRoot: '土, 木',
            personality: '安静、友善、负责、认真、尽责、忠诚、体贴、关心他人感受、努力创造和谐环境、耐心、适应性强、关怀、支持性。',
            abilities: '防御阵法、肉身淬炼（钢化骨骼）[1], 土系操控、资源栽培、基础阵法、重击型物理攻击[1], 治疗、解毒、植物/灵草栽培、辅助法术、生命力操控[1, 3]。'
        },
        'INFJ': {
            spiritRoot: '木, 水, 暗',
            personality: '寻求意义和连接、洞察人心、有远见、有良知、忠于价值观、有清晰愿景、有条理、果断、理想主义、同理心、内省、追求和谐、神秘、战略性。',
            abilities: '治疗、解毒、植物/灵草栽培、辅助法术、生命力操控[1, 3], 防御性法术、净化术、幻术、战略性战斗、灵活移动[2, 3], 隐身、诅咒、灵魂操控、禁忌魔法、间谍活动、暗影术（幽影之血、潜默冥息）[1]。'
        },
        'INTJ': {
            spiritRoot: '冰, 暗',
            personality: '具有原创思维、强大驱动力、快速洞察模式、长远规划、怀疑、独立、高标准、战略性、分析性、逻辑、有条理、深度思考、秘密、操控、神秘。',
            abilities: '冰冻法术、防御屏障、减速/定身技术、精确打击、精神清晰（寒彻之骨、太阴之息、冻魄掌）[2, 1], 隐身、幻术、诅咒、灵魂操控、禁忌魔法、间谍活动、暗影术（幽影之血、潜默冥息）[1]。'
        },
        'ISTP': {
            spiritRoot: '金, 水, 隐',
            personality: '宽容、灵活、安静的观察者、快速解决问题、分析事物运作原理、擅长处理大量数据、注重因果、逻辑、高效、适应性强、自发、务实、难以捉摸、狡猾。',
            abilities: '战斗功法、武器炼制、防御技术、肉身淬炼（锐化骨骼、钢化骨骼、玄煞之骨）[1], 防御性法术、净化术、治疗、幻术、战略性战斗、灵活移动[2, 3], 隐身、变形（幻形之骨）、间谍活动、暗杀、规避、情报收集（空化之力）[1, 4]。'
        },
        'ISFP': {
            spiritRoot: '木',
            personality: '安静、友善、敏感、善良、享受当下、忠于价值观、不喜欢冲突、不强加意见、关怀、热情、忠诚。',
            abilities: '治疗、解毒、植物/灵草栽培、辅助法术、生命力操控（春灵丹、夏灵丹、秋灵丹、冬灵丹、造化气息、通心·愤恨、灵木血竭）[1, 3]。'
        },
        'INFP': {
            spiritRoot: '木, 水, 暗',
            personality: '理想主义、忠于价值观、好奇、快速发现可能性、催化剂、寻求理解他人、帮助他人实现潜力、适应性强、灵活、接受、内省、富有同理心、追求和谐、神秘。',
            abilities: '治疗、解毒、植物/灵草栽培、辅助法术、生命力操控[1, 3], 防御性法术、净化术、幻术、战略性战斗、灵活移动[2, 3], 隐身、诅咒、灵魂操控、禁忌魔法、间谍活动、暗影术（幽影之血、潜默冥息）[1]。'
        },
        'INTP': {
            spiritRoot: '冰, 暗, 隐',
            personality: '寻求逻辑解释、理论、抽象、对思想感兴趣、安静、内敛、灵活、适应性强、深入解决问题、怀疑、批判、分析性、战略性、神秘、难以捉摸。',
            abilities: '冰冻法术、防御屏障、减速/定身技术、精确打击、精神清晰[2, 1], 隐身、幻术、诅咒、灵魂操控、禁忌魔法、间谍活动、暗影术（幽影之血、潜默冥息）[1], 变形（幻形之骨）、规避、情报收集（空化之力）[1, 4]。'
        },
        'ESTP': {
            spiritRoot: '火, 风, 雷, 金, 隐',
            personality: '灵活、宽容、务实、注重即时结果、厌倦理论、精力充沛、活在当下、自发、享受物质舒适、大胆、直接、创新、果断、有影响力、狡猾。',
            abilities: '攻击性法术、炼制法宝、爆炸性技术、快速突破（嗜火之血、火御之息、焚神掌）[1, 5], 移动技巧、闪避、侦察、迅捷打击、远程攻击、空间操控[3], 高伤害攻击性法术、惩戒性技术、驱邪（辟邪神雷）、电击攻击（雷御之息）[2, 1], 战斗功法、武器炼制、防御技术、肉身淬炼（锐化骨骼、钢化骨骼、玄煞之骨）[1], 隐身、变形（幻形之骨）、间谍活动、暗杀、规避、情报收集（空化之力）[1, 4]。'
        },
        'ESFP': {
            spiritRoot: '木',
            personality: '外向、友善、接受、热爱生活、享受物质舒适、喜欢与人合作、常识、务实、灵活、自发、适应性强、热情、善于社交。',
            abilities: '治疗、解毒、植物/灵草栽培、辅助法术、生命力操控（春灵丹、夏灵丹、秋灵丹、冬灵丹、造化气息、通心·愤恨、灵木血竭）[1, 3]。'
        },
        'ENFP': {
            spiritRoot: '木, 风',
            personality: '热情、富有想象力、看到生活充满可能性、快速连接事件和信息、自信、渴望肯定、乐于赞赏和支持、自发、灵活、善于即兴发挥、口才流利、好奇。',
            abilities: '治疗、解毒、植物/灵草栽培、辅助法术、生命力操控[1, 3], 移动技巧、闪避、侦察、迅捷打击、远程攻击、空间操控[3]。'
        },
        'ENTP': {
            spiritRoot: '火, 风, 暗',
            personality: '敏捷、机智、刺激、警觉、直言不讳、善于解决新挑战、擅长生成概念可能性、战略性分析、善于识人、厌倦常规、创新、灵活、好奇、大胆、精力充沛、神秘、操控。',
            abilities: '攻击性法术、炼制法宝、爆炸性技术、快速突破[1, 5], 移动技巧、闪避、侦察、迅捷打击、远程攻击、空间操控[3], 隐身、幻术、诅咒、灵魂操控、禁忌魔法、间谍活动、暗影术[1]。'
        },
        'ESTJ': {
            spiritRoot: '金, 火, 土, 雷',
            personality: '实际、务实、果断、快速执行决策、组织项目和人员、高效、注重结果、注重细节、逻辑、系统化、强制执行计划、大胆、精力充沛、有条理、负责、有影响力、领导力。',
            abilities: '战斗功法、武器炼制、防御技术、肉身淬炼[1, 5], 攻击性法术、炼制法宝、爆炸性技术、快速突破[1, 5], 防御阵法、土系操控、资源栽培、基础阵法、重击型物理攻击[1, 5], 高伤害攻击性法术、惩戒性技术、驱邪、电击攻击[2, 1]。'
        },
        'ESFJ': {
            spiritRoot: '木',
            personality: '热心、认真、合作、渴望和谐、努力建立和谐、忠诚、注重细节、关心他人需求、寻求被欣赏、温暖、善于社交。',
            abilities: '治疗、解毒、植物/灵草栽培、辅助法术、生命力操控（春灵丹、夏灵丹、秋灵丹、冬灵丹、造化气息、通心·愤恨、灵木血竭）[1, 3]。'
        },
        'ENFJ': {
            spiritRoot: '木',
            personality: '热心、同理心、反应灵敏、负责、高度关注他人情感需求、发现他人潜力、帮助他人实现潜力、忠诚、善于社交、提供启发性领导。',
            abilities: '治疗、解毒、植物/灵草栽培、辅助法术、生命力操控（春灵丹、夏灵丹、秋灵丹、冬灵丹、造化气息、通心·愤恨、灵木血竭）[1, 3]。'
        },
        'ENTJ': {
            spiritRoot: '火, 雷',
            personality: '坦率、果断、乐于承担领导、快速识别低效、开发和实施综合系统、享受长期规划和目标设定、知识渊博、乐于分享知识、强制执行想法、自信、战略性、有影响力。',
            abilities: '攻击性法术、炼制法宝、爆炸性技术、快速突破（嗜火之血、火御之息、焚神掌）[1, 5], 高伤害攻击性法术、惩戒性技术、驱邪（辟邪神雷）、电击攻击（雷御之息）[2, 1]。'
        }
    };

    const mbtiInput = document.getElementById('mbtiInput');
    const queryButton = document.getElementById('queryButton');
    const errorMessage = document.getElementById('errorMessage');
    const resultDisplay = document.getElementById('resultDisplay');
    const spiritRoot = document.getElementById('spiritRoot');
    const personalityTraits = document.getElementById('personalityTraits');
    const innateAbilities = document.getElementById('innateAbilities');

    queryButton.addEventListener('click', () => {
        const inputCode = mbtiInput.value.toUpperCase().trim();
        // 修正MBTI验证正则表达式
        if (inputCode.length !== 4 || !/^[EI][SN][TF][JP]$/.test(inputCode)) {
            errorMessage.classList.remove('hidden');
            resultDisplay.classList.add('hidden');
            return;
        }

        errorMessage.classList.add('hidden');
        const data = mbtiData[inputCode];

        if (data) {
            spiritRoot.textContent = data.spiritRoot;
            personalityTraits.textContent = data.personality;
            innateAbilities.textContent = data.abilities;
            resultDisplay.classList.remove('hidden');
        } else {
            // Fallback for types not explicitly mapped or if data is missing
            spiritRoot.textContent = '暂无对应灵根信息，或您的MBTI类型较为特殊，需另寻仙缘。';
            personalityTraits.textContent = '暂无详细性格特质。';
            innateAbilities.textContent = '暂无详细天赋能力。';
            resultDisplay.classList.remove('hidden');
        }
    });
});
</script>

</body>
</html>
